<template>
<div>
    <div class="headtitle"> 
       {{title}}
    </div>
    <div class="conditionForm"> 

    <el-form :inline="true" ref="queryForm" :model="queryForm">
  <el-form-item label="书名">
    <el-input v-model="queryForm.bname"  placeholder="书名"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary">查询</el-button>
  </el-form-item>
    <el-form-item>
    <el-button @click="showAddDialog" type="primary">新增</el-button>
  </el-form-item>
  </el-form>

  </div>
  
  
     <div class="table">
    <el-table
      :data="tableData"
      border
      style="width: 100%;text-align:center">

      <el-table-column
        prop="id"
        label="编号"
        width="300px"
        >
      </el-table-column>

       <el-table-column
        prop="bid"
        label="书籍编号"
       >
      </el-table-column>
       <el-table-column
        prop="bname"
        label="书名"
       >
      </el-table-column>

       <el-table-column
        prop="stocknum"
        label="数量"
        >
      </el-table-column>
       
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>   
        <el-button @click="" type="text" size="small">删除</el-button>      
      </template>
    </el-table-column>
    </el-table>
 <el-pagination class="pageSty"
  background
  layout="prev, pager, next"
  :current-page.sync="queryForm.pageNo"
  :page-size="queryForm.pageSize"
  :total="queryForm.recordTotal"
  @current-change="handleCurrentChange"
  >
   </el-pagination>
     </div>
   
 <el-dialog title="添加库存项" :visible.sync="dialogAddFormVisible">
     
    <el-form :inline="true" ref="dataForm" :model="dataForm" label-width="120px">
  <el-form-item  label="书籍编号">
    <el-input v-model="dataForm.bid"></el-input>
  </el-form-item>
  <el-form-item  label="库存">
    <el-input v-model="dataForm.stocknum"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="doAdd()">添加</el-button>
 <el-button @click="dialogAddFormVisible = false" >关闭</el-button>
  </el-form-item>
</el-form>
  </el-dialog>
   <el-dialog title="修改库存项" :visible.sync="dialogEditFormVisible">
     
    <el-form :inline="true" ref="dataForm" :model="dataForm" label-width="120px">
  <el-form-item  label="书籍编号">
    <el-input v-model="dataForm.bid" :disabled="true"></el-input>
  </el-form-item>
  <el-form-item  label="库存">
    <el-input v-model="dataForm.stocknum"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="doEdit()">修改</el-button>
 <el-button @click="dialogEditFormVisible = false" >关闭</el-button>
  </el-form-item>
</el-form>
  </el-dialog>
  
     
</div>
 
</template>
    
<script>
import {getStocksByCondition,addStockRecord,getStockRecordById,editStockRecord,romoveStockRecord} from "../../api/stock/stock"
 export default {
     name:'StockTable',
      data() {
        return {
            title:'库存管理',
            queryForm:{
            bname:'',
            pageNo: 1,
            pageSize: 18,
            recordTotal: 100
            },
            dialogAddFormVisible:false,
            dialogEditFormVisible:false,
            dataForm:{},
            tableData: []
        }
      },
          methods: {
              getList(){
           var _this=this;
          getStocksByCondition(_this.queryForm).then((res)=>{
            if(res.data.result!=null){
                   _this.tableData=res.data.result;
                }
                 _this.queryForm.recordTotal=res.data.recordTotal;
          }).catch((err)=>{
          console.log(err)
          })     
              },
               handleCurrentChange(currentPage){
              this.queryForm.pageNo=currentPage
              this.getList()
             },
              showAddDialog(){
                this.dataForm={}
              this.dialogAddFormVisible = true
             },
             showEditDialog(stockinfo){
               this.dataForm={}
               getStockRecordById(stockinfo.id).then((res)=>{
                 if(res.flag){
                   this.dataForm = res.data
                      this.dialogEditFormVisible = true
                 }
               })
            
             },
             doEdit(){
                  editStockRecord(this.dataForm).then((res)=>{
                    if(res.flag){
                      this.dialogEditFormVisible=false;
                      this.getList();
                    }
                  })
             },
             doAdd(){
               addStockRecord(this.dataForm).then((res)=>{
                 if(res.flag){
                   this.dialogAddFormVisible=false;
                    this.getList();
                 }
               })
             },
             doDelete(info){
            var _this = this
          this.$confirm('此操作将永久删除该库存记录, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(()=>{
           romoveStockRecord(info.id).then((res)=>{
             if(res.flag){
                _this.$message({
                 type: 'success',
               message: '删除成功!'
             });
             }
             _this.getList();
           })
         })  
             }
          },
          created() {
            this.getList();
          }
    }
</script>
<style scoped>
.headtitle{
    text-align: left;
    padding: 5px;
    border-bottom: 1px lightgrey solid;
    color: gray;
}
.conditionForm{
     width: 80%;
    margin: 50px auto 0px auto;
}
.table{
    text-align: center !important;
    
}
.pageSty
{
  position:absolute;
  left: 75%;
  bottom:5%;
}
</style>